class MpStack extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.render();
  }

  render() {
    const orientation = this.getAttribute("orientation") || "vertical";
    const alignItems = this.getAttribute("alignitems") || "start";
    const justifyContent = this.getAttribute("justifycontent") || "start";
    const gap = this.getAttribute("gap") || "8";
    const flexWrap = this.getAttribute("flexwrap") || "nowrap";
    const width = this.getAttribute("width") || "auto";
    const height = this.getAttribute("height") || "auto";
    const className = this.getAttribute("class") || "";
    const alignSelf = this.getAttribute("alignself") || "";

    const currentOrientation = orientation === "vertical" ? "column" : "row";

    this.shadowRoot.innerHTML = `
        <div class="${className}"
          style="
            display: flex;
            flex-direction: ${currentOrientation};
            align-items: ${alignItems};
            justify-content: ${justifyContent};
            gap: var(--mp-size-${gap});
            flex-wrap: ${flexWrap};
            width: ${width};
            height: ${height};
            align-self: ${alignSelf};
          "
        >
          <slot></slot>
        </div>
      `;
  }
}

customElements.define("mp-stack", MpStack);
